<template>
    <div class="products_brand">
        <Header/>
        <div class="third_show bh_500" :style="background">
            <img src="../assets/temp/bb5_a_web.jpg" class="imgshow">
            <div class="text pages_w1145">
                <div class="en">{{detail.alias}}</div>
                <div class="cn">{{detail.name}}</div>
            </div>
        </div>
        <div class="second_box">
            <div class="pages_w1145 pa_70 fl-clr">
                <div class="fl-clr" data-details="rd">
                    <div class="bw_850 fl">
                        <div class="scientific_details">
                            <div class="text" v-html="detail.content"></div>
                            <div class="details_bottom fl-clr" v-if="pn">
                                <router-link v-if="pn.p" :to="{name:'products_brand_details',params: { id: pn.p.id }}" class="a prev"></router-link>
                                <router-link :to="{name:'products_brand'}" class="a return"></router-link>
                                <router-link v-if="pn.n" :to="{name:'products_brand_details',params: { id: pn.n.id }}" class="a next"></router-link>
                            </div>
                        </div>
                    </div>
                    <div class="bw_260 fr pc" data-details="rdbox">
                        <div class="scientific_rd_cp">
                            <div class="scientific_title">推荐产品</div>
                            <ul class="ul brand_right_list">



                                <li class="scale" v-for="(item,index) in list" :key="index">
                                    <router-link :to="{name:'products_brand_details',params: { id: item.id }}" class="box scale">
                                        <div class="img"><img :src="$store.state.domain+item.pic"></div>
                                        <div class="title">{{item.name}}</div>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Footer/>

    </div>
</template>




<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'

export default {
    components: {
        Footer, Header
    },
    data () {
        return {
            list: [],
            pn: {},
            detail: {},
            background: '',
        }
    },
    computed: {

        menudata () {
            if (JSON.stringify(this.$store.getters.getmenudata(6)).length > 100) {
                return this.$store.getters.getmenudata(6)
            } else {
                return false
            }
        },
        menudatalist () {
            console.log(this.$store.getters.getmenudatalist(6));
            if (JSON.stringify(this.$store.getters.getmenudatalist(6)).length > 100) {
                return this.$store.getters.getmenudatalist(6)
            } else {
                return false
            }
        },
        menulistconfig () {
            return this.$store.getters.getmenuconfig
        },
    },
    mounted () {
        this.getData();
        if ($('[data-details="rd"]').length > 0) {
            $(window).scroll(function () {
                if ($(window).scrollTop() > $('[data-details="rd"]').offset().top) {
                    $('[data-details="rdbox"]').addClass('details-fixed-r');
                } else {
                    $('[data-details="rdbox"]').removeClass('details-fixed-r');
                }
            })
        }
    },
    methods: {
        getData () {
            this.$axios.get(this.$store.state.domain+'/Multi/index.json', { params: this.$route.params }).then(res => {

                //this.$emit('mywatch2')
                this.detail = res.data.newsdata
                this.list = res.data.newslist
                this.pn = res.data.pn
                if (this.detail.banners) {
                    this.background = {
                        backgroundImage: `url(${this.detail.banners})`
                    }
                }
            });
        },
    },
    watch: {
        $route () {
            this.getData();
        }
    }
}

</script>
